<template>
  <Timer />
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router
  >
    <el-menu-item index="/environment">环境</el-menu-item>
    <!-- <el-menu-item index="/energyConsumption">生长</el-menu-item> -->
  </el-menu>
  <router-view />
</template>

<script>
import { ref, onMounted } from 'vue'
import Timer from './Timer.vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  components: { Timer },
  setup() {
    const activeIndex = ref('/environment')
    const route = useRoute()
    const router = useRouter()
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath)
    }

    onMounted(() => {
      router.push({ name: 'environment' })
    })
    return {
      handleSelect,
      route,
      router,
      activeIndex
    }
  }
}
</script>

<style>
/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */
</style>
